<template>
    <div v-bind:class="type" class="swiper-container">
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="(item,index) in slides" :key="index"><img :src="item"/></swiper-slide>
            <div class="swiper-pagination" v-bind:class="page" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name: 'Swiper',
    props: {
      slides: Array,
      type: '',
      page: '',
    }, components: {
      swiper,
      swiperSlide,
    },
    data () {
      return {
        swiperOption: {
          notNextTick: true,
          //循环
          loop: true,
          //设定初始化时slide的索引
          initialSlide: 0,
          //自动播放
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },
          //滑动速度
          speed: 800,
          //滑动方向
          direction: 'horizontal',
          //小手掌抓取滑动
          grabCursor: true,
          //滑动之后回调函数
          //分页器设置
        },
      }
    },
  }
</script>
